import React, { useEffect, useRef, useState } from "react";
import styles from "./Home.module.css";

import img1 from "../../assets/images/ceil.png"; //黑夜
import img4 from "../../assets/images/ceil-day.png"; //白天
import img2 from "../../assets/images/floor.png"; //黑夜
import img5 from "../../assets/images/floor-day.png"; //白天
import img3 from "../../assets/images/speaking.jpeg"; //背景
import img6 from "../../assets/images/notice.gif"; //铃铛
// import img7 from "../../assets/images/answer-icon.svg"; //问号选中
import img8 from "../../assets/images/answer-model.svg"; //问号未选中
import img9 from "../../assets/images/chat-model.svg"; //消息未选中
// import img10 from "../../assets/images/chat-model-active.svg"; //消息选中
import img11 from "../../assets/images/night-model.svg"; ////黑夜
import img12 from "../../assets/images/day-model.svg"; //白天

// 数字人
import ModelViewer from "../../components/ModelViewer";

import { useTranslation } from "react-i18next";
import { Button, Input, Space } from "antd";
import { useSelector, useDispatch } from "react-redux";
import { modifications } from "../../store/counterSlice";
// 弹幕
import Danmaku from "rc-danmaku";

function Home() {
  const [Value, setValue] = useState("");
  // 弹幕
  const danmakuInsRef = useRef<Danmaku | null>(null);
  // 弹幕hover显示隐藏
  const [isHovered, setIsHovered] = useState(false);
  // 获取语言
  const { t, i18n } = useTranslation();
  // redux
  const theme = useSelector((state) => state.counter.schema);
  const dispatch = useDispatch();
  // 主题切换
  const settheme = () => {
    dispatch(modifications());
  };
  // 默认渲染弹幕数据
  const defaultDanmakus = [
    "欢迎来到直播间！",
    "主播很给力，点赞！",
    "这个视频太精彩了！",
  ];

  useEffect(() => {
    const danmakuIns = new Danmaku(".danmaku-wrapper", {
      rowHeight: 40, // 弹幕轨道高度，默认40（单位px）
      speed: 120, // 弹幕速度，默认100（单位px/s）
      opacity: 1, // 弹幕透明度，默认为1，范围 0-1
      maxRow: 3, // 弹幕最大轨道数，会根据容器高度自动计算，也可以手动赋值
    });
    danmakuInsRef.current = danmakuIns;
    // 首次加载的时候渲染弹幕
    defaultDanmakus.forEach((danmakuText) => {
      if (danmakuInsRef.current) {
        danmakuInsRef.current.push(danmakuText);
      }
    });
    return () => {
      danmakuInsRef.current?.destroy();
    };
  }, []);
  // 弹幕发送事件
  const onSend = () => {
    if (danmakuInsRef.current) {
      danmakuInsRef.current.push(Value);
      setValue("");
    }
  };

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };
  // 视频暂停事件
  const handlePause = () => {
    if (danmakuInsRef.current) {
      // 判断danmakuInsRef是否为空，如果不为空，弹幕也需要暂停
      danmakuInsRef.current.pause();
    }
  };
  const handlePlay = () => {
    if (danmakuInsRef.current) {
      // 判断danmakuInsRef是否为空，如果不为空，弹幕也需要播放
      danmakuInsRef.current.resume();
    }
  };

  return (
    <div className={styles.home}>
      <div className={styles.home_title}>
        <img
          style={{ width: "100%", height: "110%" }}
          src={theme === "light" ? img1 : img4}
          alt=""
        />
        <div className={styles.home_title_btn}>
          <a href="" style={{ marginRight: "20px" }}>
            {t("enter3DExhibition")}
          </a>
          <Button onClick={settheme} color="primary" variant="outlined">
            {t("switchTheme")}
          </Button>
          <Button
            onClick={() =>
              i18n.changeLanguage(i18n.language == "en" ? "zh" : "en")
            }
          >
            {i18n.language !== "en" ? "English" : "中文"}
          </Button>
        </div>
      </div>
      <div
        className={theme === "light" ? styles.home_body : styles.home_body_dark}
      >
        <div className={styles.home_body_ModelViewer}>
          <ModelViewer></ModelViewer>
        </div>

        <div className={styles.home_body_content_text}>
          <p>{t("text")}</p>
          <img src={img6} alt="" />
        </div>
        <div
          className={styles.home_body_content}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <div
            className="danmaku-wrapper"
            style={{
              width: "740px",
              height: "400px",
            }}
          >
            <video
              src="https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4"
              // src='http://localhost:5173/123123.MP4'
              // src="http://localhost:5173/555.MP4"
              // src="http://localhost:5173/666.MP4"
              width="100%"
              height="104%"
              autoPlay
              muted
              controls
              onPause={handlePause}
              onPlay={handlePlay}
            ></video>
          </div>
          {isHovered && (
            <Space.Compact
              style={{
                width: "90%",
                position: "absolute",
                bottom: "100px",
                left: "50%",
                transform: "translateX(-50%)",
              }}
            >
              <Input
                onPressEnter={() => {
                  onSend();
                }}
                value={Value}
                onChange={(e) => {
                  setValue(e.target.value);
                }}
                placeholder="请输入你要发送的内容"
              />
              <Button type="primary" onClick={onSend}>
                发送
              </Button>
            </Space.Compact>
            // <Search
            //   style={{

            //     width: "90%",
            //     opacity: "0.8",
            //   }}
            //   placeholder="请输入你要发送的内容"
            //   allowClear
            //   enterButton="发送"
            //   size="large"
            //   onSearch={onSearch}
            // />
          )}
        </div>
      </div>
      <div className={styles.home_foot}>
        <img className={styles.home_foot_ai} src={img3} alt="" />
        <div className={styles.home_foot_icon}>
          <img src={img8} alt="" />
          <img src={img9} alt="" />
          <img
            onClick={() => {
              dispatch(modifications());
            }}
            src={theme === "light" ? img12 : img11}
            alt=""
          />
        </div>

        <img
          style={{ width: "100%", height: "100%" }}
          src={theme === "light" ? img2 : img5}
          alt=""
        />
      </div>
    </div>
  );
}

export default Home;
